<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>

</head>
<body>
<div id="test"></div>
</body>
<script src="../js/new/react.development.js"></script>
<script src="../js/new/react-dom.development.js"></script>
<!--将jsx转为js-->
<script src="../js/new/babel.min.js"></script>
<script src="../js/new/prop-types.js"></script>
<!--babel  由babel转换jsx-->
<script type="text/babel">
    /*
    * 1.虚拟DOM中key的作用：
    *   当状态中数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，
    *   随后react进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
    *   1）.旧的虚拟DOM中找到了与新虚拟DOM相同的key：
    *       a.若虚拟DOM中内容没变，直接使用之前的真实DOM
    *       b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
    *   2）.旧虚拟DOM中未找到与新虚拟DOM相同的key
    *       根据数据创建新的真实DOM，随后渲染到页面
    * 2.index作为key可能会引发的问题
    *   1）.若对数据进行：逆序添加、逆序删除等破坏性顺序操作————会产生没有必要的真实DOM更新（界面效果正常渲染，但效率低）
    *   2）.如果结构中还包含输入类的DOM————会产生错误的DOM更新（渲染效果有问题）
    * */
    /*
    * 拆解渲染：使用index会发生的问题如下影响效率以及会数据错乱
    *   初始数据：
    *       {id: 1,name: '小米',age: 18},
    *       {id: 2,name: '小李',age: 19}
    *   初始虚拟DOM：
    *       <li key=0>小米----18</li>
    *       <li key=1>小李----19</li>
    *   更新后的数据
    *       {id: 3,name: '小王',age: 20}
    *       {id: 1,name: '小米',age: 18},
    *       {id: 2,name: '小李',age: 19}
    *   更新后的虚拟DOM：
    *       <li key=0>小王----20</li>
    *       <li key=1>小米----18</li>
    *       <li key=2>小李----19</li>
    * */
    class Person extends React.Component {
        state = {
            persons: [
                {
                    id: 1,
                    name: '小米',
                    age: 18
                },
                {
                    id: 2,
                    name: '小李',
                    age: 19
                }
            ]
        }
        add = () => {
            const {persons} = this.state
            const p = {id: persons.length + 1, name: '小王', age: 20}
            this.setState({persons: [p, ...persons]})
        }

        render() {
            return (
                <div>
                    <h2>展示人员信息</h2>
                    <button onClick={this.add}>添加一个小王</button>
                    <ul>
                        {
                            this.state.persons.map((personObj, index) => {
                                return <li key={index}>{personObj.name}----{personObj.age}<input type="text"/></li>
                            })
                        }
                    </ul>
                </div>
            )
        }
    }

    ReactDOM.render(<Person/>, document.getElementById('test'))
</script>
</html>